import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import useCountDown from '../../hooks/useCountDown'
import {
    Form,
    Input,
    Button,
    NavBar
} from 'antd-mobile'
function Index() {
    const navigate = useNavigate()
    const [form] = Form.useForm()
    const [jq, setJq] = useState(false)
    const { countDown, iseRuning, } = useCountDown(60)

    const onValuesChange = () => {
        console.log(123);
        setJq(true)
    }
    return (
        <div>
            <NavBar onBack={() => navigate(-1)}>
                登陆
            </NavBar>
            <Form
                onValuesChange={onValuesChange}
                layout='horizontal'
                footer={
                    <Button disabled={!jq} block type='submit' size='large' style={{ background: '#676565', color: '#fff' }} onClick={() => navigate('/')}>
                        登录
                    </Button>
                }
            >
                <Form.Item
                    name='username'
                    label='手机号'
                    rules={[
                        { required: true, message: '手机号不能为空' },
                        { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
                    ]}
                >
                    <Input placeholder='请输入手机号' />
                </Form.Item>
                <Form.Item
                    name='password'
                    label='密码'
                    rules={[{ required: true, message: '密码不能为空' }]}
                >
                    <Input placeholder='请输入密码' />
                </Form.Item>
            </Form>
        </div>
    )
}

export default Index
